<script setup>
import {onMounted, ref} from "vue";
import {del, list, save} from "@/api/room";
import {ElMessage, ElMessageBox} from "element-plus";

let data = ref()
onMounted(() => {
  list().then(res => {
    data.value = res.data;
  })
})
let remove = (id) => {
  del(id).then(res => {
    ElMessage.success("删除成功")
    list().then(res => {
      data.value = res.data;
    })
  })
}

let add = () => {
  ElMessageBox.prompt('请输入教室名称', '新建教室', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
  })
      .then(({value}) => {
        save(value).then(res => {
          ElMessage.success("新建成功")
          list().then(res => {
            data.value = res.data;
          })
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消',
        })
      })
}
</script>

<template>
  <div>
    <div style="margin-left: 20px">
      <h1>教室管理</h1>
    </div>

    <div style="margin-bottom: 20px;margin-left: 20px;margin-top: 20px">
      <el-button @click="add">添加教室</el-button>
    </div>
    <!--  教室页面-->
    <div>
      <el-table
          :data="data"
      >
        <el-table-column label="教室名称" prop="name" width="130"/>
        <el-table-column #default="{row}" label="状态" width="100">

          <div v-if="0==row.status">
            <el-tag type="success">正常</el-tag>
          </div>
          <div v-else>
            <el-tag type="primary">正在使用</el-tag>
          </div>
        </el-table-column>
        <el-table-column #default="{row}" label="操作">
          <el-button size="small" type="danger" @click="remove(row.id)">删除</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


